<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout}">
<head>
    <title>鲜花信息列表</title>
    <style>
        .flower-list-container {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            max-width: 1200px;
            margin: 0 auto;
            backdrop-filter: blur(5px);
        }
        .flower-title {
            font-size: 2rem;
            font-weight: 700;
            color: #ff1493;
            margin-bottom: 1.5rem;
            text-align: center;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        }
        .search-container {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .search-box {
            border: 2px solid #ffcce0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        .search-box:focus {
            border-color: #ff69b4;
            box-shadow: 0 0 0 0.25rem rgba(255, 105, 180, 0.25);
        }
        .search-btn {
            background: linear-gradient(135deg, #ff69b4, #ff1493);
            color: white;
            border: none;
            box-shadow: 0 3px 8px rgba(255, 105, 180, 0.3);
            transition: all 0.3s ease;
            border-radius: 30px;
            padding: 8px 20px;
        }
        .search-btn:hover {
            background: linear-gradient(135deg, #ff1493, #ff69b4);
            transform: translateY(-2px);
            box-shadow: 0 5px 12px rgba(255, 105, 180, 0.4);
        }
        .search-filters {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }
        .filter-group {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .filter-label {
            font-weight: 600;
            color: #ff69b4;
            margin-bottom: 0;
            white-space: nowrap;
        }
        .filter-select {
            border: 1px solid #ffcce0;
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 0.9rem;
            color: #555;
            min-width: 100px;
        }
        .filter-select:focus {
            border-color: #ff69b4;
            box-shadow: 0 0 0 0.2rem rgba(255, 105, 180, 0.2);
        }
        .clear-filter-btn {
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 0.9rem;
            background-color: transparent;
            color: #6c757d;
            border: 1px solid #6c757d;
            transition: all 0.3s ease;
        }
        .clear-filter-btn:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
        }
        .table-container {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }
        .flower-table thead {
            background: linear-gradient(135deg, #ff69b4, #ff1493);
        }
        .flower-table th {
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 15px;
            border: none;
            text-align: center;
        }
        .flower-table td {
            padding: 15px;
            vertical-align: middle;
            border-bottom: 1px solid #ffecf2;
            text-align: center;
        }
        .flower-table tr:hover {
            background-color: #fff0f5;
        }
        .flower-table tr:last-child td {
            border-bottom: none;
        }
        .flower-name {
            font-weight: 600;
            color: #ff1493;
        }
        .flower-badge {
            padding: 8px 15px;
            font-weight: 500;
            letter-spacing: 0.5px;
        }
        .flower-price {
            font-weight: 600;
            color: #ff69b4;
        }
        .flower-stock {
            font-weight: 600;
        }
        .flower-stock.low {
            color: #ff0000;
        }
        .flower-location {
            background-color: #f8f9fa;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
        .action-btn {
            border-radius: 30px;
            padding: 8px 20px;
            font-weight: 500;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }
        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .btn-primary.action-btn {
            background: linear-gradient(135deg, #ff69b4, #ff1493);
            border: none;
            color: white;
            box-shadow: 0 3px 8px rgba(255, 105, 180, 0.3);
        }
        .btn-primary.action-btn:hover {
            background: linear-gradient(135deg, #ff1493, #ff69b4);
            box-shadow: 0 5px 12px rgba(255, 105, 180, 0.4);
        }
        .btn-danger.action-btn {
            background: linear-gradient(135deg, #ff5b77, #ff0a36);
            border: none;
            box-shadow: 0 3px 8px rgba(255, 0, 0, 0.2);
        }
        .btn-danger.action-btn:hover {
            background: linear-gradient(135deg, #ff0a36, #ff5b77);
            box-shadow: 0 5px 12px rgba(255, 0, 0, 0.3);
        }
        .add-flower-btn {
            border-radius: 30px;
            padding: 10px 25px;
            font-weight: 600;
            letter-spacing: 0.5px;
            background: linear-gradient(135deg, #ff69b4, #ff1493);
            border: none;
            color: white;
            box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
            transition: all 0.3s ease;
        }
        .add-flower-btn:hover {
            background: linear-gradient(135deg, #ff1493, #ff69b4);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 105, 180, 0.4);
        }
        .pagination {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            background-color: white;
            border-radius: 50px;
            padding: 8px 15px;
            box-shadow: 0 3px 10px rgba(255, 105, 180, 0.15);
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
            min-height: 52px;
        }
        .page-link {
            border-radius: 50%;
            margin: 0 3px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            border: 1px solid #ffcce0;
            color: #ff1493;
            transition: all 0.2s ease;
        }
        .page-item.active .page-link {
            background: linear-gradient(135deg, #ff69b4, #ff1493);
            border-color: #ff1493;
        }
        .page-navigation {
            border-radius: 30px;
            width: auto;
            padding: 0 15px;
            margin: 0 5px;
        }
        .page-info {
            color: #6c757d;
            font-size: 0.9rem;
            margin: 0 10px;
            white-space: nowrap;
        }
        .empty-state {
            padding: 50px 0;
            text-align: center;
        }
        .empty-icon {
            font-size: 5rem;
            color: #ffcce0;
            margin-bottom: 20px;
        }
        .empty-text {
            font-size: 1.2rem;
            color: #6c757d;
            margin-bottom: 30px;
        }
    </style>
</head>
<body style="background-image: url('../static/bg.jpg')">
<!--    <h1 layout:fragment="header">鲜花信息列表</h1>-->

    <div layout:fragment="content">
        <div class="flower-list-container">
            <h2 class="flower-title">
                <i class="bi bi-flower3 me-2"></i>鲜花信息列表
            </h2>
            
            <div class="search-container">
                <form id="searchForm" th:action="@{/flowers}" method="get">
                    <div class="search-filters">
                        <div class="input-group" style="max-width: 400px;">
                            <span class="input-group-text bg-white border-end-0">
                                <i class="bi bi-search" style="color: #ff69b4;"></i>
                            </span>
                            <input class="form-control search-box border-start-0" type="search" placeholder="搜索花卉名称、类别或存放位置..." 
                                   name="keyword" aria-label="搜索" th:value="${param.keyword}">
                        </div>
                        
                        <div class="filter-group">
                            <label class="filter-label">类别:</label>
                            <select class="filter-select" name="category" id="categoryFilter">
                                <option value="">全部</option>
                                <option value="观赏花" th:selected="${param.category == '观赏花'}">观赏花</option>
                                <option value="切花" th:selected="${param.category == '切花'}">切花</option>
                                <option value="盆栽花" th:selected="${param.category == '盆栽花'}">盆栽花</option>
                                <option value="干花" th:selected="${param.category == '干花'}">干花</option>
                                <option value="装饰花" th:selected="${param.category == '装饰花'}">装饰花</option>
                            </select>
                        </div>
                        
                        <div class="filter-group">
                            <label class="filter-label">价格:</label>
                            <select class="filter-select" name="priceRange" id="priceFilter">
                                <option value="">全部</option>
                                <option value="0-50" th:selected="${param.priceRange == '0-50'}">¥0-50</option>
                                <option value="50-100" th:selected="${param.priceRange == '50-100'}">¥50-100</option>
                                <option value="100-200" th:selected="${param.priceRange == '100-200'}">¥100-200</option>
                                <option value="200+" th:selected="${param.priceRange == '200+'}">¥200以上</option>
                            </select>
                        </div>
                        
                        <div class="filter-group">
                            <label class="filter-label">库存:</label>
                            <select class="filter-select" name="stock" id="stockFilter">
                                <option value="">全部</option>
                                <option value="low" th:selected="${param.stock == 'low'}">库存不足</option>
                                <option value="normal" th:selected="${param.stock == 'normal'}">库存充足</option>
                            </select>
                        </div>
                        
                        <button type="button" id="clearFilters" class="clear-filter-btn">
                            <i class="bi bi-x-circle me-1"></i>清除筛选
                        </button>
                        
                        <button type="submit" class="search-btn">
                            <i class="bi bi-funnel-fill me-1"></i>应用筛选
                        </button>
                    </div>
                </form>
            </div>
            
            <div style="margin: 20px 0" class="d-flex justify-content-center mb-3">
                <a th:href="@{/flowers/add}" class="btn add-flower-btn">
                    <i class="bi bi-plus-circle me-1"></i>添加新花卉
                </a>
            </div>

            <div class="table-container">
                <div class="table-responsive">
                    <table class="table flower-table mb-0">
                        <thead>
                            <tr>
                                <th width="5%">序号</th>
                                <th width="20%">花卉名称</th>
                                <th width="15%">类别</th>
                                <th width="10%">价格 (¥)</th>
                                <th width="10%">库存数量</th>
                                <th width="20%">存放位置</th>
                                <th width="20%">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:if="${#lists.isEmpty(flowers)}">
                                <td colspan="7" class="empty-state">
                                    <i class="bi bi-emoji-frown empty-icon"></i>
                                    <p class="empty-text">暂无花卉信息</p>
                                    <a th:href="@{/flowers/add}" class="btn add-flower-btn">
                                        <i class="bi bi-plus-circle me-1"></i>添加第一朵花
                                    </a>
                                </td>
                            </tr>
                            <tr th:each="flower, stat : ${flowers}">
                                <td th:text="${stat.count}">1</td>
                                <td>
                                    <div class="flower-name">
                                        <i class="bi bi-flower1 me-1" style="color: #ff69b4;"></i>
                                        <span th:text="${flower.name}">玫瑰花</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge rounded-pill flower-badge" th:classappend="${
                                        flower.category == '切花' ? 'bg-danger' : 
                                        flower.category == '盆栽花' ? 'bg-success' : 
                                        flower.category == '干花' ? 'bg-warning text-dark' : 
                                        flower.category == '观赏花' ? 'bg-info text-dark' : 
                                        flower.category == '装饰花' ? 'bg-primary' : 'bg-secondary'
                                    }" th:text="${flower.category}">观赏花</span>
                                </td>
                                <td>
                                    <span class="flower-price" th:text="${'¥' + #numbers.formatDecimal(flower.price, 1, 2)}">¥99.90</span>
                                </td>
                                <td>
                                    <span class="flower-stock" th:classappend="${flower.stockQuantity < 30 ? 'low' : ''}" 
                                          th:text="${flower.stockQuantity}">100</span>
                                    <div th:if="${flower.stockQuantity < 30}" class="small text-danger">库存不足</div>
                                </td>
                                <td>
                                    <span class="flower-location" th:text="${flower.storageLocation}">A区</span>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a th:href="@{/flowers/edit/{id}(id=${flower.id})}" class="btn btn-primary btn-sm action-btn me-2">
                                            <i class="bi bi-pencil-square me-1"></i>修改
                                        </a>
                                        <a th:href="@{/flowers/delete/{id}(id=${flower.id})}" class="btn btn-danger btn-sm action-btn"
                                           onclick="return confirm('确定要删除这条花卉信息吗？')">
                                            <i class="bi bi-trash me-1"></i>删除
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 分页信息 -->
            <div class="mt-4 mb-2 text-center">
                <p style="color: #ff69b4; font-weight: bold;">
                    分页信息: 第 <span th:text="${page + 1}">1</span> 页，共 <span th:text="${totalPages}">2</span> 页，每页 <span th:text="${size}">10</span> 条，总计 <span th:text="${totalItems}">15</span> 条记录
                </p>
            </div>

            <!-- 简单水平分页 -->
            <div class="d-flex justify-content-center mt-3 mb-4">
                <div style="display: flex; align-items: center; background-color: #f8f9fa; border-radius: 10px; padding: 5px 10px;">
                    <!-- 上一页 -->
                    <a th:href="@{/flowers(page=${page - 1}, size=${size}, keyword=${param.keyword}, category=${param.category}, priceRange=${param.priceRange}, stock=${param.stock})}" 
                       style="text-decoration: none; padding: 5px 15px; font-weight: bold; color: #ff69b4;"
                       th:style="${page == 0 ? 'color: #ccc; pointer-events: none;' : 'color: #ff69b4;'}">
                       上一页
                    </a>
                    
                    <!-- 页码 -->
                    <div style="display: flex; margin: 0 10px;">
                        <a th:each="i : ${#numbers.sequence(0, totalPages - 1)}" 
                           th:href="@{/flowers(page=${i}, size=${size}, keyword=${param.keyword}, category=${param.category}, priceRange=${param.priceRange}, stock=${param.stock})}" 
                           style="display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 3px; border-radius: 50%; text-decoration: none;"
                           th:style="${i == page ? 'background-color: #ff69b4; color: white; font-weight: bold;' : 'background-color: white; color: #ff69b4; border: 1px solid #ffcce0;'}">
                           [[${i + 1}]]
                        </a>
                    </div>
                    
                    <!-- 下一页 -->
                    <a th:href="@{/flowers(page=${page + 1}, size=${size}, keyword=${param.keyword}, category=${param.category}, priceRange=${param.priceRange}, stock=${param.stock})}" 
                       style="text-decoration: none; padding: 5px 15px; font-weight: bold; color: #ff69b4;"
                       th:style="${page >= totalPages - 1 ? 'color: #ccc; pointer-events: none;' : 'color: #ff69b4;'}">
                       下一页
                    </a>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Add animation to table rows
                const tableRows = document.querySelectorAll('tbody tr');
                tableRows.forEach((row, index) => {
                    row.style.animation = `fadeIn 0.3s ease-in-out ${index * 0.05}s forwards`;
                    row.style.opacity = '0';
                });

                // Add CSS for animation
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes fadeIn {
                        from { opacity: 0; transform: translateY(10px); }
                        to { opacity: 1; transform: translateY(0); }
                    }
                    @keyframes pulse {
                        0% { transform: scale(1); }
                        50% { transform: scale(1.05); }
                        100% { transform: scale(1); }
                    }
                    .flower-title {
                        animation: pulse 2s infinite;
                    }
                `;
                document.head.appendChild(style);

                // Highlight low stock items
                const lowStockItems = document.querySelectorAll('.flower-stock.low');
                lowStockItems.forEach(item => {
                    setInterval(() => {
                        item.style.opacity = item.style.opacity === '0.5' ? '1' : '0.5';
                    }, 1000);
                });

                // 清除筛选按钮事件
                document.getElementById('clearFilters').addEventListener('click', function() {
                    document.querySelector('input[name="keyword"]').value = '';
                    document.getElementById('categoryFilter').value = '';
                    document.getElementById('priceFilter').value = '';
                    document.getElementById('stockFilter').value = '';
                    document.getElementById('searchForm').submit();
                });

                // 为筛选下拉框添加事件监听器
                const filterSelects = document.querySelectorAll('.filter-select');
                filterSelects.forEach(select => {
                    // 保存原始值用于比较
                    select.dataset.originalValue = select.value;

                    // 监听变化
                    select.addEventListener('change', function() {
                        // 高亮显示已更改的筛选条件
                        if (this.value !== '') {
                            this.style.borderColor = '#ff69b4';
                            this.style.fontWeight = 'bold';
                        } else {
                            this.style.borderColor = '#ffcce0';
                            this.style.fontWeight = 'normal';
                        }
                    });
                });

                // 初始化时高亮显示已选中的筛选条件
                filterSelects.forEach(select => {
                    if (select.value !== '') {
                        select.style.borderColor = '#ff69b4';
                        select.style.fontWeight = 'bold';
                    }
                });
            });
        </script>
    </th:block>
</body>
</html> 